<template>
	<div class="order-detail">
		<div class="order-list">
			<div class="order-list-item" v-for="order in list" :key="order.id">
				<div class="order-list-item-infor">
					<el-form :label-position="'right'" label-width="100px" label-suffix=":" size="mini">
						<el-row>
							<el-col :span="10">
								<el-form-item label="商城订单号">
									{{order.orderList[0].orderNo}}
								</el-form-item>
							</el-col>
							<template v-if="!order.isLocalSupplier">
								<el-col :span="10">
									<el-form-item label="电商订单号">
										{{ order.orderList[0].eshopNumber }}
									</el-form-item>
								</el-col>
							</template>
							<el-col :span="8">
								<el-form-item label="下单时间">
									{{ order.createTime | formeTime }}
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="采购方式">
									{{ order.purchaseName }}
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="联系人">
									{{ order.consignee }}
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="联系电话">
									{{ order.phone }}
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="要求到货时间">
									{{ order.sendRemark }}
								</el-form-item>
							</el-col>
							<el-col :span="24">
								<el-form-item label="到货地点">
									{{ order.address }}
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</div>
				<!--  :class="detailIdArr.indexOf(cur.detailList[index].id)>-1?'active':''" -->
				<div class="order-list-item-child" v-for="(cur,index) in order.orderList" :key="cur.id">
					<div class="order-list-item-child-infor  set-flex align-item-center set-between">
						<el-form :label-position="'right'" label-width="100px" label-suffix=":" size="mini">
							<el-row>
								<el-col :span="8">
									<el-form-item :label="order.isLocalSupplier==='0'?'电商':'供应商'">
										{{cur.orderType == '1'?'德邻工业品有限公司':''}}{{cur.orderType == '2'?cur.supplierName:''}}
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="上级供应商">
										{{cur.supplierName}}
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="含税总价">
										¥{{ cur.sumBudget }}
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="未税总价">
										{{cur.sumExcludeTaxPrice == 0 || cur.sumExcludeTaxPrice == null ? '':'¥'+cur.sumExcludeTaxPrice}}
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="订单状态">
										{{ cur.orderStateName }}
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="发票类型">
										{{ cur.receiptTypeName }}
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="运费">
										¥{{ cur.freight ? cur.freight : "0" }}
									</el-form-item>
								</el-col>
								<el-col :span="8" v-if="cur.orderState === 'A1007'">
									<el-form-item label="取消原因">
										<template>
											<el-popover placement="top" trigger="hover">
												<div class="cell-content">{{cur.cancelRemark}}</div>
												<p class="overflow" slot="reference">{{cur.cancelRemark}}</p>
											</el-popover>
										</template>
									</el-form-item>
								</el-col>
							</el-row>
						</el-form>
						<div class="action">
							<el-button type="text" @click="
							  gotoDetail(cur)
							">查看详情</el-button>
						</div>
					</div>
					<div class="child-body">
						<div class="child-body-box">
							<div class="child-body-box-cur set-flex align-item-center set-between"
								v-for="one in cur.detailList" :key="one.id"
								:style="cur.detailList.length === 1 ? 'height: 100%;' : ''"  :class="detailIdArr.indexOf(one.id)>-1?'active':''">
								<div class="set-pointer" @click="showGood(one.goodsId)">
									<img v-lazy="goodsUrl(one)" :alt="one.goodsName" />
								</div>
								<div class="goodsname uni-ellipsis-2 set-pointer" @click="showGood(one.goodsId)">
									{{ one.goodsName }}
								</div>
								<div>数量：x{{ one.buyNum }}</div>
								<div>
									<div>含税单价：¥ {{ one.price }}</div>
									<div>未税单价：{{ one.excludeTaxPrice == null ? '':'¥'+one.excludeTaxPrice }}</div>
								</div>
								<div class="action">
									<el-button type="text" style="float: right;margin-right: 5px;" v-if="detailIdArr.indexOf(one.id)>-1" @click="
									  getTimeList(one.goodsId,order.createTime)
									">预警点</el-button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 查看附件   -->
		<el-dialog :visible.sync="dialogPreviewVisible">
			<img width="100%" :src="dialogImageUrl" alt="">
		</el-dialog>



		<!-- editDialog 编辑弹窗 START -->
		<el-dialog title="订单详情" :visible.sync="editDialogShow" :close-on-click-modal="false"
			:close-on-press-escape="false" width="80%">
			<h4>订单信息</h4>
			<el-row style="margin: 10px 0">
				<el-col :span="12" class="pd5 lineHeight20">
					<el-col :span="8" class="text-right">所属单位：</el-col>
					<el-col :span="16">{{ orderDetailData.purchaseName }}</el-col>
				</el-col>
				<el-col :span="12" class="pd5 lineHeight20">
					<el-col :span="8" class="text-right">订单号：</el-col>
					<el-col :span="16">{{ orderDetailData.orderNo }}</el-col>
				</el-col>
				<el-col :span="12" class="pd5 lineHeight20">
					<el-col :span="8" class="text-right">电商订单号：</el-col>
					<el-col :span="16">{{ orderDetailData.eshopNumber }}</el-col>
				</el-col>
				<el-col :span="12" class="pd5 lineHeight20">
					<el-col :span="8" class="text-right">订单状态：</el-col>
					<el-col :span="16">{{ orderDetailData.orderState }}</el-col>
				</el-col>
				<el-col :span="12" class="pd5 lineHeight20">
					<el-col :span="8" class="text-right">下单时间：</el-col>
					<el-col :span="16">{{ orderDetailData.orderTime|formeTime }}</el-col>
				</el-col>
				<el-col :span="12" class="pd5 lineHeight20">
					<el-col :span="8" class="text-right">发票类型：</el-col>
					<el-col :span="16">{{ orderDetailData.receiptType }}</el-col>
				</el-col>
				<el-col :span="12" class="pd5 lineHeight20">
					<el-col :span="8" class="text-right">开票单位：</el-col>
					<el-col :span="16">{{ orderDetailData.unitName }}</el-col>
				</el-col>
				<el-col :span="12" class="pd5 lineHeight20">
					<el-col :span="8" class="text-right">发票地址：</el-col>
					<el-col :span="16">{{ orderDetailData.registeredAddress }}</el-col>
				</el-col>
				<el-col :span="12" class="pd5 lineHeight20">
					<el-col :span="8" class="text-right">含税总价：</el-col>
					<el-col :span="16">¥ {{ orderDetailData.sumBudget }}</el-col>
				</el-col>
				<el-col :span="12" class="pd5 lineHeight20">
					<el-col :span="8" class="text-right">运费：</el-col>
					<el-col :span="16">¥ {{ orderDetailData.freight }}</el-col>
				</el-col>

				<el-col :span="12" class="pd5 lineHeight20" v-if="orderDetailData.cancelRemark">
					<el-col :span="8" class="text-right">取消订单原因：</el-col>
					<el-col :span="16">{{ orderDetailData.cancelRemark }}</el-col>
				</el-col>
				<el-col :span="12" class="pd5 lineHeight20">
					<el-col :span="8" class="text-right">下单时填写的备注：</el-col>
					<el-col :span="16">{{ orderDetailData.orderRemark }}</el-col>
				</el-col>
			</el-row>
			<h4>采购人信息</h4>
			<el-row style="margin: 10px 0">
				<el-col :span="12" class="pd5 lineHeight20">
					<el-col :span="8" class="text-right">采购人：</el-col>
					<el-col :span="16">{{ orderDetailData.purchaserName }}</el-col>
				</el-col>
				<el-col :span="12" class="pd5 lineHeight20">
					<el-col :span="8" class="text-right">单位名称：</el-col>
					<el-col :span="16">{{ orderDetailData.purchaseName }}</el-col>
				</el-col>
				<el-col :span="12" class="pd5 lineHeight20">
					<el-col :span="8" class="text-right">收货地址：</el-col>
					<el-col :span="16">{{ orderDetailData.completeAddress }}</el-col>
				</el-col>
				<el-col :span="12" class="pd5 lineHeight20">
					<el-col :span="8" class="text-right">收货人：</el-col>
					<el-col :span="16">{{ orderDetailData.consignee }}</el-col>
				</el-col>
				<el-col :span="12" class="pd5 lineHeight20">
					<el-col :span="8" class="text-right">收货人手机：</el-col>
					<el-col :span="16">{{ orderDetailData.phone }}</el-col>
				</el-col>
				<el-col :span="12" class="pd5 lineHeight20">
					<el-col :span="8" class="text-right">付款方式：</el-col>
					<el-col :span="16">{{ orderDetailData.payment }}</el-col>
				</el-col>
				<el-col :span="12" class="pd5 lineHeight20">
					<el-col :span="8" class="text-right">送货方式：</el-col>
					<el-col :span="16">{{ orderDetailData.sendRemark }}</el-col>
				</el-col>
				<!-- <el-col :span="12"
                class="pd5 lineHeight20">
          <el-col :span="8"
                  class="text-right">发票抬头：</el-col>
          <el-col :span="16">{{orderDetailData.invoice}}</el-col>
        </el-col>
        <el-col :span="12"
                class="pd5 lineHeight20">
          <el-col :span="8"
                  class="text-right">发票税号：</el-col>
          <el-col :span="16">{{orderDetailData.accountNumber}}</el-col>
        </el-col> -->
				<el-col :span="12" class="pd5 lineHeight20">
					<el-col :span="8" class="text-right">税号：</el-col>
					<el-col :span="16">{{ orderDetailData.dutyParagraph }}</el-col>
				</el-col>
				<el-col :span="12" class="pd5 lineHeight20">
					<el-col :span="8" class="text-right">发票打印电话：</el-col>
					<el-col :span="16">{{
            orderDetailData.registrationTelephone
          }}</el-col>
				</el-col>
				<el-col :span="12" class="pd5 lineHeight20">
					<el-col :span="8" class="text-right">开户银行：</el-col>
					<el-col :span="16">{{ orderDetailData.depositBank }}</el-col>
				</el-col>
				<el-col :span="12" class="pd5 lineHeight20">
					<el-col :span="8" class="text-right">银行账号：</el-col>
					<el-col :span="16">{{ orderDetailData.accountNumber }}</el-col>
				</el-col>
				<el-col :span="12" class="pd5 lineHeight20">
					<el-col :span="8" class="text-right">发票打印地址：</el-col>
					<el-col :span="16">{{ orderDetailData.registeredAddress }}</el-col>
				</el-col>

				<!-- <el-col :span="12"
                class="pd5 lineHeight20">
          <el-col :span="8"
                  class="text-right">注册电话：</el-col>
          <el-col :span="16">{{orderDetailData.registrationTelephone}}</el-col>
        </el-col>
        <el-col :span="12"
                class="pd5 lineHeight20">
          <el-col :span="8"
                  class="text-right">开户行：</el-col>
          <el-col :span="16">{{orderDetailData.depositBank}}</el-col>
        </el-col>
        <el-col :span="12"
                class="pd5 lineHeight20">
          <el-col :span="8"
                  class="text-right">开户行账号：</el-col>
          <el-col :span="16">{{orderDetailData.dutyParagraph}}</el-col>
        </el-col>
        <el-col :span="12"
                class="pd5 lineHeight20">
          <el-col :span="8"
                  class="text-right">注册地址：</el-col>
          <el-col :span="16">{{orderDetailData.registeredAddress}}</el-col>
        </el-col> -->
			</el-row>
			<h4>电商信息</h4>
			<el-row style="margin: 10px 0">
				<el-col :span="12" class="pd5 lineHeight20">
					<el-col :span="8" class="text-right">电商名称：</el-col>
					<el-col :span="16">{{ orderDetailData.orgNameZh }}</el-col>
				</el-col>
				<el-col :span="12" class="pd5 lineHeight20">
					<el-col :span="8" class="text-right">电商简称：</el-col>
					<el-col :span="16">{{ orderDetailData.orgNameZhShort }}</el-col>
				</el-col>
				<el-col :span="12" class="pd5 lineHeight20">
					<el-col :span="8" class="text-right">营业地址：</el-col>
					<el-col :span="16">{{ orderDetailData.addr }}</el-col>
				</el-col>
				<el-col :span="12" class="pd5 lineHeight20">
					<el-col :span="8" class="text-right">法人名称：</el-col>
					<el-col :span="16">{{ orderDetailData.legalPerson }}</el-col>
				</el-col>
				<el-col :span="12" class="pd5 lineHeight20">
					<el-col :span="8" class="text-right">联系人电话：</el-col>
					<el-col :span="16">{{ orderDetailData.contactTel }}</el-col>
				</el-col>
				<el-col :span="12" class="pd5 lineHeight20">
					<el-col :span="8" class="text-right">委托代理人：</el-col>
					<el-col :span="16">{{ orderDetailData.contact }}</el-col>
				</el-col>
			</el-row>
			<h4>物流配送信息</h4>
			<div v-if="isLocalSupplier === '1'">
				<el-form :label-position="'right'" label-width="178px" label-suffix=":" size="mini">
					<el-row>
						<el-col :span="12">
							<el-form-item label="物流单号">
								<ul>
									<li v-for="item in localList" :key="item.id">
										{{ item.logisticNo }}
									</li>
								</ul>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
			<e-table :data="logisticsList" v-else :columns="columns1" :pageShow="false" stripe border
				 style="width: 100%">
			</e-table>
			<h4>商品信息</h4>
			<e-table :data="orderDetailData.orderDetailList" :columns="columns2" :pageShow="false" stripe border
				 style="width: 100%">
				<template slot-scope="{ scope }" slot="priceOfficePicture">
					<el-button type="text" @click="handlePreview(scope.row.priceOfficePicture)"
						style="text-decoration: underline;">{{pictureName(scope.row.priceOfficePicture)}}</el-button>
				</template>
			</e-table>
		</el-dialog>
		<!-- editDialog 编辑弹窗 END -->



		<el-dialog title="预警点" :visible.sync="editDialogShow2" :close-on-click-modal="false"
			:close-on-press-escape="false" width="60%">
			<el-row style="margin: 10px 0">
				<el-table
				    border
				    :data="timeList"
					:row-class-name="tableRowClassName"
				    style="width: 100%">
				  <el-table-column
				      label="类别">
						<template slot-scope="scope">
							<span v-if="type == 1">{{scope.row.goodsState == 'PASS'?'上架':'下架'}}</span>
							<span v-else>价格修改</span>
						</template>
				  </el-table-column>
				  <el-table-column prop="goodsPrice" label="价格">
				  </el-table-column>
				  <el-table-column
				      label="时间">
					  <template slot-scope="scope">
					  	{{scope.row.createTime}}
					  </template>
				  </el-table-column>
				</el-table>
			</el-row>
		</el-dialog>
		

		<!-- <leaveHistoryForm :businessKey="businessKey" /> -->

		<el-form :model="form" ref="form" label-width="100px" class="demo-dynamic">
			<el-form-item v-for="(domain, index) in form.formData" :label="domain.controlLable" :key="index">
				<el-radio-group v-model="domain.controlValue" v-if="'radio'==domain.controlType">
					<el-radio v-for="(defaults,indexd) in domain.controlDefault.split('--__--')" :label=indexd
						:key="indexd">{{defaults}}

					</el-radio>

				</el-radio-group>
				<el-input type="textarea" v-model="domain.controlValue" v-if="'textarea'==domain.controlType">
				</el-input>
			</el-form-item>
		</el-form>

		<div v-if="fromData.length>0" style="margin-top: 20px;border-top: 1px solid #ddd;">
			<div class="historyList historyHead">
				<h3 class="item">审批节点</h3>
				<h3 class="item">审批人</h3>
				<h3 class="item">审批时间</h3>
				<h3 class="item">审批意见</h3>
				<h3 class="item">审批批注</h3>
			</div>
			<div class="historyList" v-for="(historyData, index) in fromData" :key="index">
				<h3 class="item">{{historyData.taskNodeName}}</h3>
				<h3 class="item">{{historyData.createName}}</h3>
				<h3 class="item">{{historyData.createdDate}}</h3>
				<div v-for="(fistoryFormData, indexH) in historyData.formHistoryDataDTO" :key="indexH">
					<!-- <h3 class="item">{{fistoryFormData.title}}</h3> -->
					<h3 class="item">{{fistoryFormData.value}}</h3>
				</div>
			</div>
		</div>
		<div v-if="form.formData.length>0">
			<el-button type="primary" @click="submitForm" style="display: block;margin: 20px auto;display: block;">确 定
			</el-button>
		</div>
	</div>
</template>

<script>
	import printJS from 'print-js'
	import {
		orderDetail,
		getdetailsByOrderId,
		getOrderPrint
	} from '@/api/mall.api'

	import {
		centrOrderInfor,
		getOrderDetailItemStateByShowId,
		getOrderDetailItemPriceChangeByOrderId,
		hisList,
		changeList
	} from '@/api/admin.api'

	import {
		orderLogistics
	} from '@/api/supplier.api'
	import moment from 'moment'
	import {
		getFileInfo
	} from "@/api/common.api";

	import {
		listTask,
		formDataShow,
		formDataSave
	} from "@/api/activiti/task";
	import leaveHistoryForm from "@/views/activiti/workflow/leave/leaveHistoryForm";

	import {
		historyFromData
	} from '@/api/activiti/historyFormdata'


	import config from "@/config";
	import {
		getOrderListOnLine
	} from '@/api/mall.api'
	export default {
		name: 'order-detail',
		components: {
			leaveHistoryForm
		},
		data() {
			return {
				dialogPreviewVisible: false,
				dialogImageUrl: '',
				id: '',
				showId:'',
				supplierName: '',
				list: [],
				localList: [],
				infor: {},
				goodsList: [],
				dialogTableVisible: false,
				orderInfor: {},
				isLocalSupplier: '0',
				businessKey: '',
				taskId: '',
				definitionKey: '',
				from: '',
				// 表单参数
				form: {
					formData: []
				},
				fromData: [],

				DNS: {},

				// 编辑框是否展示
				editDialogShow: false,
				editDialogShow2: false,

				// 订单详情数据
				orderDetailData: {},
				// 物流信息
				logisticsList: [],
				isLocalSupplier: '0',
				// 本地供应商物流信息
				localList: [],
				columns1:[
					  {
						prop: 'content',
						minWidth: '150',
						label: '操作信息'
					  },
					  {
						prop: 'operator',
						minWidth: '150',
						label: '操作人'
					  },
					  {
						prop: 'operate_time',
						minWidth: '150',
						label: '操作时间'
					  }
					],
					columns2: [{
						prop: 'goodsName',
						minWidth: '150',
						label: '商品名称'
					},
					{
						prop: 'categoryName',
						minWidth: '150',
						label: '品目'
					},
					{
						prop: 'sku',
						minWidth: '150',
						label: 'SKU'
					},
					{
						prop: 'brandName',
						minWidth: '150',
						label: '品牌'
					},
					{
						prop: 'typeNo',
						minWidth: '100',
						label: '型号'
					},
					{
						prop: 'buyNum',
						minWidth: '100',
						label: '数量'
					},
					{
						prop: 'unit',
						minWidth: '100',
						label: '计量单位'
					},
					{
						prop: 'excludeTaxPrice',
						minWidth: '100',
						label: '未税单价'
					},
					{
						prop: 'price',
						minWidth: '100',
						label: '含税单价'
					},
					{
						prop: 'sumExcludeTaxPrice',
						minWidth: '100',
						label: '未税总价'
					},
					{
						prop: 'budget',
						minWidth: '100',
						label: '含税总价'
					},
					{
						prop: 'supplierTaxRate',
						minWidth: '100',
						label: '税率'
					},
					{
						prop: 'afterSaleStatus',
						minWidth: '100',
						label: '退换货'
					},
					{
						minWidth: '100',
						label: '官网截图',
						slotName: 'priceOfficePicture'
					}
				],
				detailIdArr:[],
				timeArr:[],
				timeList:[],
				type:''
			}
		},
		filters: {
			formeTime(val) {
				return val ? moment(val).format('YYYY-MM-DD HH:mm:ss') : ' '
			},
			// 加千分位
			formPrice(num) {
				if (!num) {
					return '--'
				}
				let reg = /\d{1,3}(?=(\d{3})+$)/g
				return String(num).replace(reg, '$&,')
			}
		},
		computed: {
			pictureName() {
				return function(picture) {
					if (!picture) {
						return ''
					} else {
						const priceOfficePicture = JSON.parse(picture)
						return priceOfficePicture.name
					}
				}
			},
			// 商品图片地址
			goodsUrl() {
				return function(item) {
					const host = window.location.host
					const {
						DNS
					} = this
					let flag = false
					// 遍历外网地址
					for (let i = 0, max = DNS.outernet.length; i < max; i++) {
						const item = DNS.outernet[i]
						if (item === host) {
							flag = true
							break
						}
					}
					// 外网地址
					if (flag) {
						return item.goodsImagePath
					}
					// 内外地址
					else {
						return item.goodsImagePathIntranet
					}
				}
			}
		},
		created() {
			this.DNS = config.DNS
			this.id = this.$route.query.id
			this.showId = this.$route.query.showId
			var taskId = this.$route.query.taskId
			this.taskId = taskId;
			this.definitionKey = this.$route.query.definitionKey
			this.businessKey = this.$route.query.businessKey
			this.from = this.$route.query.from

			this.supplierName = this.$route.query.supplierName
			this.isLocalSupplier = this.$route.query.isLocalSupplier
			this.type = this.$route.query.type

			if(this.type == 1){
				this.getOrderDetailItemStateByShowId();
			}else{
				this.getOrderDetailItemPriceChangeByOrderId();
			}
		},
		methods: {
			tableRowClassName({row, rowIndex}) {
				if (this.timeArr.indexOf(row.createTime)>-1) {
										return 'active';
				}
				return '';
		    },
			getOrderDetailItemStateByShowId(){
				getOrderDetailItemStateByShowId({
					id:this.id,
					showId:this.showId
				}).then((res)=>{
					var detailIdArr = [];
					var timeArr = [];
					res.forEach(item => {
					  detailIdArr.push(item.detailId);
					  timeArr.push(item.stateCreateTime);
					})
					this.detailIdArr = detailIdArr;
					this.timeArr = timeArr;
					this.getOrderDetail();
				})
			},
			getOrderDetailItemPriceChangeByOrderId(){
				getOrderDetailItemPriceChangeByOrderId({
					id:this.id,
					showId:this.showId
				}).then((res)=>{
					var detailIdArr = [];
					var timeArr = [];
					res.forEach(item => {
					  detailIdArr.push(item.detailId);
					  timeArr.push(item.priceChangeCreateTime);
					})
					this.detailIdArr = detailIdArr;
					this.timeArr = timeArr;
					this.getOrderDetail();
				})
			},
			getTimeList(goodsId,createTime){
				var that = this;
				if(this.type == 1){
					hisList(goodsId).then(res=>{
						that.editDialogShow2 = true;
						that.changeList(res.rows);
					})
				}else{
					var x  =  createTime ? moment(createTime).format('YYYY-MM-DD HH:mm:ss') : ' '
					var data = {
						createTime:x,
						goodsId:goodsId
					}
					changeList(data).then(res=>{
						that.editDialogShow2 = true;
						that.changeList(res);
					})
				}
				
			},
			changeList(list){
				var that = this;
				// for (var i = 0; i < list.length; i++) {
				// 	if(this.timeArr.indexOf(list[i].createTime) > -1){
				// 		console.log(list);
				// 		console.log(this.timeArr);
				// 		that.timeList = [list[i]];
				// 	}
				// }
				that.timeList = list;
			},
			// 跳转到详情
			gotoDetail(row) {
				// this.$router.push({
				// 	path: '/order-detail',
				// 	query
				// })
				var that = this;

				that.isLocalSupplier = row.eshopNumber ? '0' : '1'
				centrOrderInfor(row.id).then((res) => {
					that.orderDetailData = res
					that.editDialogShow = true
				})
				orderLogistics(row.id)
					.then((res) => {
						if (res && res.length > 0) {
							if (this.isLocalSupplier === '0') {
								const result = res[0].track
								this.LogisticsList = result ? JSON.parse(result) : []
							} else {
								this.localList = res
							}
						}
					})
					.catch((err) => {
						console.log(err)
						if (err.code === -1) {
							this.logisticsList = []
							this.localList = []
						}
					})

			},
			getOrderDetail() {
				const params = {
					showId: this.showId,
					id:this.id,
					purchaseType: 1, // 1按产品采购 2按需采购
					current: 1,
					size: 100,
				}
				getOrderListOnLine(params).then(res => {
					this.list = res.records
				})
			},
			goDetail(row) {
				var goodsId = row.goodsId;
				this.$router.push({
					path: "/detail?id=" + goodsId
				})
			},
			getHistoryList() {
				historyFromData(this.businessKey).then(response => {
					this.fromData = response
				})
			},
			/** 提交按钮 */
			submitForm() {
				var that = this;
				formDataSave(this.taskId, this.form.formData).then(response => {
					if (response.code == 200) {
						that.$message.success('审批成功');
						// that.getDetail();
						that.$router.go(-1)
					} else {
						that.$message.error('审批失败');
					}
				});
			},
			changeRate(value) {
				if(value==null){
					value = 0;
				}
				if (value.indexOf("%") > -1) {

				} else {
					value = value + "%"
				}
				return value;
			},
			// 预览附件
			handlePreview(value) {
				const file = JSON.parse(value)
				// 获取附件信息
				getFileInfo(file.fileType, file.id).then(res => {
					if (['image/png', 'image/jpeg'].includes(res.contextType)) {
						this.dialogImageUrl = res.url
						this.dialogPreviewVisible = true
					} else {
						// 下载
						document.location.href = res.url
					}
				})
			},
			print() {
				printJS({
					printable: 'myHtmlElement',
					type: 'html',
					maxWidth: '1360',
					targetStyles: ['*']
				})
			},
			// 查询订单详情
			orderDetailFn() {
				orderDetail(this.id).then(res => {
					this.infor = res
					if (this.infor.id) {
						this.getdetailsByOrderIdFn(this.infor.id)
					}
				})
			},
			// 物流信息
			orderLogisticsFn() {
				orderLogistics(this.id).then(res => {
					// 电商
					if (res && res.length) {
						this.list = JSON.parse(res[0].track)
						this.localList = res
					}
				})
			},
			// 查询商品信息
			getdetailsByOrderIdFn(id) {
				getdetailsByOrderId(id).then(res => {
					this.goodsList = res
				})
			},
			showDialog() {
				// 获取打印数据
				getOrderPrint(this.id).then(res => {
					this.orderInfor = res
					this.dialogTableVisible = true
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.order-detail {
		padding: 40px 30px;
		margin-bottom: 30px;

		.order-block {
			padding-bottom: 28px;
			border-bottom: 1px solid #d4dce7;

			.title {
				padding: 20px 0 10px;
				font-size: 16px;
			}
		}

		.steps {
			display: flex;
			align-items: center;
			padding: 10px 20px;

			.steps-block {
				display: flex;
				flex-direction: column;
				width: 160px;
				height: 95px;
				align-items: center;

				span {
					// padding: 3px 0;
				}

				i {
					display: flex;
					justify-content: center;
					align-items: center;
					margin: 5px auto;
					width: 38px;
					height: 38px;
					font-size: 28px;
					color: #fff;
					background: #999;
					border-radius: 50%;
				}

				&.on i {
					background: #ff9000;
				}
			}

			.arrow {
				margin-bottom: 40px;
				width: 120px;
				height: 8px;
				background: url('../../../assets/mall-images/steps-arrow.png') no-repeat;
				background-size: 100% 100%;
				background-position: center center;

			}
		}

		// 重置form样式
		.el-form-item {
			margin-bottom: 0;
		}

		// 打印按钮
		.print {
			padding-top: 50px;
			text-align: center;
		}

		// 合计
		.sum-box {
			padding-top: 20px;
			text-align: right;
			color: $--color-danger;
			font-size: 14px;

			.sumBudget {
				font-size: 20px;
			}
		}
	}

	.order-print {
		padding: 0 20px;
		color: #303133;

		&-title {
			font-size: 20px;
			text-align: center;
			padding-bottom: 10px;
		}

		&-body {
			margin: 15px 0;
			font-size: 14px;
			border-top: 1px solid #d8d8d8;
			border-left: 1px solid #d8d8d8;

			&-row {
				display: flex;
				border-bottom: 1px solid #d8d8d8;

				.col-title {
					flex: 0 0 100px;
					font-weight: bold;
					padding: 5px;
					border-right: 1px solid #d8d8d8;
				}

				.col2-title {
					flex: 1;
					font-weight: bold;
					padding: 5px;
					border-right: 1px solid #d8d8d8;
					text-align: center;

					&.goodname {
						flex: 0 0 540px;
					}
				}

				.col2-cont {
					flex: 1;
					padding: 5px;
					border-right: 1px solid #d8d8d8;
					text-align: center;

					&.goodname {
						flex: 0 0 540px;
					}
				}

				.col-cont {
					flex: 1;
					padding: 5px;
					border-right: 1px solid #d8d8d8;
				}
			}
		}

		&-desc {
			.title {
				font-weight: bold;
			}

			.el-row {
				margin: 6px 0;
			}
		}

		&-seal {
			text-align: right;

			img {
				height: 240px;
			}
		}

		.invoice {
			width: 100%;
			border-collapse: collapse;
			border-right: 1px solid #d8d8d8;
			border-bottom: 1px solid #d8d8d8;

			tr td {
				padding: 5px;
				border-left: 1px solid #d8d8d8;
				border-top: 1px solid #d8d8d8
			}

			&-head {
				font-weight: bold;
			}

			&-content {
				text-align: left !important;
			}
		}
	}

	.btn-print {
		text-align: center;
	}

	.historyHead {
		background: #f5f7fa;
	}

	.historyList {
		width: 100%;
		overflow: hidden;
		border-left: 1px solid #ddd;
		border-bottom: 1px solid #ddd;

		.item {
			float: left;
			width: 20%;
			border-right: 1px solid #ddd;
			height: 35px;
			line-height: 35px;
			text-align: center;
		}
	}


	// 订单列表
	.order-list {
		padding: 0 20px 20px;

		&-item {
			margin-bottom: 20px;
			border: 2px solid #e8ecf2;

			&-infor {
				padding: 16px 0 10px;
				background: #e5e5e5;

				.el-form-item {
					margin-bottom: 0;
				}
			}

			&-child {
				&-infor {
					display: flex;
					padding: 16px 0 10px;
					border-top: 2px solid #e8ecf2;

					.el-form-item {
						margin-bottom: 0;
					}

					.action {
						flex: 0 0 110px;
						text-align: center;
					}
				}
			}
		}

		.child-body {
			// padding-left: 18px;

			// 商品
			&-box {
				flex: 1;

				&-cur {
					padding: 20px;
					height: 100px;
					box-sizing: border-box;
					border-bottom: 2px solid #e8ecf2;

					&:first-child {
						border-top: 2px solid #e8ecf2;
					}

					&:last-child {
						border-bottom: none;
					}

					img {
						width: 68px;
						height: 68px;
						border: 1px solid #e8ecf2;
					}

					.goodsname {
						flex: 0 0 280px;
						height: 40px;
					}
				}
			}

			// 按钮
			&-btns {
				border-top: 2px solid #e8ecf2;
				border-left: 2px solid #e8ecf2;
				padding: 10px 0;
				flex: 0 0 110px;

				.el-button {
					padding: 5px 0;
					margin: 0 auto;
				}
			}
		}
	}

	.control-box {
		margin-bottom: 10px;
	}

	.text-right {
		text-align: right;
	}

	.pd5 {
		padding: 5px;
	}

	.lineHeight20 {
		line-height: 20px;
	}

	h4 {
		line-height: 30px;
	}

	.order-manager .el-dialog__body {
		height: 70vh;
		overflow-y: auto;
	}

	 ::v-deep .active{
		background: #f9f7be !important;
	}
</style>
